<template>
  <el-cascader
    v-model="manageRange"
    placeholder="请选择经营范围"
    style="width: fit-content"
    :options="materialCategoryLevelList"
    :collapse-tags="true"
    :props="{
      value: 'id',
      label: 'name',
      checkStrictly: false,
    }"
    @change="handleManageRangeChange"
  />
</template>

<script setup>
import CommonAPI from "@/api/system/common";
import { arrayToTree } from "@/utils/handledata";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: () => "",
  },
  defaultParams: {
    type: Object,
    default: () => {},
  },
});
const manageRange = ref([]);
const materialCategoryLevelList = ref([]);
const originalData = ref([]);
const handleManageRangeChange = (value) => {
  emit("update:modelValue", value[1]);
};
const getMaterialCategoryList = async () => {
  // try {
  //   let res = await CommonAPI.getAllMaterialCategory({
  //     isLeaf: false,
  //     enable: true,
  //     ...props.defaultParams,
  //   });
  //   let data = res.map((item) => {
  //     if ("selfOwn" in item) {
  //       return {
  //         ...item,
  //         disabled: !item.selfOwn,
  //       };
  //     }
  //     return item;
  //   });
  //   originalData.value = data;
  //   materialCategoryLevelList.value = arrayToTree(data, 3);
  // } catch (error) {
  //   console.log(error, "error");
  // }
};
watchEffect(() => {
  manageRange.value = [];
  const category = originalData.value.find((item) => item.id === props.modelValue);
  if (!category) return;
  const { parentCode } = category;
  const parentCategory = originalData.value.find((item) => item.code === parentCode);
  if (!parentCategory) return;
  manageRange.value = [parentCategory.id, category.id];
});
onMounted(async () => {
  await getMaterialCategoryList();
});
</script>
